<template>
  <div class="container">
    <h1 class="aside left" v-show="leftShowing">
      <el-tooltip placement="left" :content="arrowContentHide">
        <div class="hide-left-btn"  v-show="leftShowing" @click="hideLeft">
          <el-icon :size="24" >
            <d-arrow-left />
          </el-icon>
        </div>
      </el-tooltip>
      <div class="workspace-title">
        <div :class="`wt-cell ${this.step === 1 ? 'wt-cell-active' : ''}`" @click="routeToDetail">
          题目详情
        </div>
        <div  :class="`wt-cell ${this.step === 2 ? 'wt-cell-active' : ''}`" @click="step = 2">
          题目解析
        </div>
        <div  :class="`wt-cell ${this.step === 3 ? 'wt-cell-active' : ''}`" @click="step = 3">
          提交记录
        </div>
      </div>
      <ProblemDetail v-show="step === 1"/>
      <ArticleList v-if="step === 2"/>
      <RecordList v-if="step === 3"/>
    </h1>
    <el-tooltip placement="right" :content="arrowContentShow">
      <div class="open-left-btn"  v-show="!leftShowing" @click="showLeft">
        <el-icon :size="24" >
          <d-arrow-right />
        </el-icon>
      </div>
    </el-tooltip>
    <div :class="leftShowing ? 'aside right' :'aside bigright'">
      <router-view @submitSuccess="onSubmitSuccess"/>
    </div>
  </div>
</template>

<script>
import {DArrowRight,DArrowLeft} from "@element-plus/icons"
import {Record} from "../utils/http/record";
import { ElNotification } from 'element-plus'

export default {
  name: "WorkSpace",
  components:{
    DArrowRight,DArrowLeft
  },
  created() {
    if (!this.$store.state.isLogin){
      this.$message.error('您还未登录，请先登录！');
      this.$goRoute('/login')
    }
  },
  data:function () {
    return {
      problemId:"1",
      leftShowing:true,
      arrowContentShow:"显示题目详情",
      arrowContentHide:"隐藏题目详情",
      step:1
    }
  },
  methods:{
    hideLeft(){
      this.leftShowing = false
    },
    showLeft(){
      this.leftShowing = true
    },
    routeToDetail(){
      this.step = 1
      this.$goRoute('/work/'+this.$route.params.proId)
    },
    async onSubmitSuccess(id){
      let status = 0;
      do {
        await new Promise(res=>setTimeout(res,2000))
        let resp = await Record.getStatus(id)
        status = resp?.data?.status
      }while (status === 0)
      ElNotification({
        title: '判题成功',
        message: '您的提交结果：'+Record.getStatusDetail(status),
        type: 'success',
      })
      this.step = 3;
    }
  }
}
</script>

<style scoped>
.container{
  display: flex;
  height: 100%;
  position: relative;
}
.aside{
  width: 50%;
  height: 100%;
  margin: 0;
  position: relative;
}
.left{
  width: 39%;
  border-right: 2px dashed gray;
}
.right{
  width: 61%;
}
.bigright{
  width: 100%;
}

.workspace-title{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  border-radius: 5px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12);
  background: white;
  height: 50px;
}


.wt-cell{
  width: 30%;
  cursor: pointer;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: normal;
  user-select: none;
}

.wt-cell-active{
  border-radius: 10px 10px 0 0 ;
  border: 1px solid #b3d8ff;
  border-bottom: 0;
  font-size: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.wt-c1{
  background-color: #f0f9eb;
  color: #67c23a;
}

.wt-c2{
  background-color: #ecf5ff;
  color:#409eff;
}

.wt-c3{
  background-color: #fdf6ec;
  color: #e6a23c;
}

.open-left-btn{
  top: 3px;
  position: absolute;
  width: 50px;
  height: 45px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  z-index: 9;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-color: #b3d8ff;
  color:#409eff;
}

.hide-left-btn{
  top: 3px;
  position: absolute;
  width: 50px;
  height: 45px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  z-index: 9;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  right: -55px;
  border-color: #b3d8ff;
  color: #409eff;
}
</style>